<template>
	<z-paging ref="paging" v-model="dataList" @query="queryList">
		<template #top>
			<view class="bgf">
				<u-tabs :list="list1" @click="getCurrent" :current="current" :activeStyle="{ color: '#CDA26C' }"
					lineColor="#CDA26C" :scrollable="true" :inactiveStyle="{ color: '#666666' }"></u-tabs>
			</view>
		</template>

		<view class="">
			<view class="xp24-32">
				<view class="shop xmt24" v-for="(item,index) in dataList" :key="index"
					@click.stop="topage('/pages/mine/order/detil?id=' + item.id)">
					<view class="xflex-x-between xbb8D xp24">
						<view class="xflex-x">
							<view class="xfz28 xfw600 xc3 ">订单编号：{{item.sn}}</view>
						</view>
						<view class="state1 xfz28 xfw500" v-if="item.status == 0">待付款</view>
						<view class="state1 xfz28 xfw500" v-if="item.status == 1">待审核</view>
						<view class="state3 xfz28 xfw500" v-if="item.status == 2">未通过</view>
						<view class="state4 xfz28 xfw500" v-if="item.status == 3">待上传</view>
						<view class="state4 xfz28 xfw500" v-if="item.status == 4">已完成</view>
						<view class="state4 xfz28 xfw500" v-if="item.status == 5">已取消</view>
					</view>
					<view class="commodity xflex-x xp24" v-for="(g,y) in item.order_goods" :key="y">

						<image class="commodity-img xmr24" :src="g.goods_image" mode=""></image>
						<view class="commodity-info xflex1 xflex-y-between">
							<view class="commodity-title">
								{{ g.goods_name }}
								<!-- 名字 -->
							</view>
							<view class="commodity-specs">{{g.goods_area}}</view>
							<view class="xflex-x-between">
								<view class="commodity-pic">
									¥{{g.goods_price}}
									<!-- 价格 -->
								</view>
								<view class="commodity-num">
									x{{g.goods_num}}

									<!-- 数量 -->
								</view>
							</view>
						</view>
					</view>
					
					<view class="time xpl24 xpr24">
						{{item.reason}}
					</view>
					
					
					<view class="total xp24 " :class="false? 'xbb8D' : ''">
						共{{item.goods_num}}件，合计：
						<text class="xfz36">¥{{item.goods_price}}</text>
					</view>
					<view class="xflex-x-between">
						<view class="time xm24">
							<!-- <view class="xflex-x" v-if="item.status == 0">
								<uni-countdown :font-size="12" color="#FF4A48" :show-day="false"
									:day="item.currentTime.days" :hour="item.currentTime.hours" :minute="3"
									:second="item.currentTime.seconds" />
								<view style="margin-bottom: 4rpx;">自动关闭</view>

							</view> -->
						</view>


						<view class="xflex-x xm24 ">
							<view class="btn1 xmr12" v-if="item.status == 0 || item.status == 1"
								@click.stop="opencancel(item.id)">取消订单</view>
							<view class="btn2" v-if="item.status == 0 ||  item.status == 2" @click="toPages('/pages/mine/order/play?id=' + item.id)">{{item.status == 0?'立即付款':'重新提交'}}</view>
							<!-- <view class="btn3 xml12" v-if="item.status == 2"
								@click.stop="topage('/pages/mine/order/logistics?id=' + item.id)">查看物流</view>
							<view class="btn3 xml12" v-if="item.status == 2" @click.stop="TakeOrder(item.id)">确认收货
							</view> -->
							
							<view class="btn3 xml12" v-if="item.status == 3"  @click="toPages('/pages/mine/order/pick?id=' + item.id)">确认收货
							</view>
							<!-- <view class="btn3 xmr12" v-if="false"
								@click.stop="toPages('/pages/mine/order/invoice?order_id=' + item.id+'&money='+item.pay_money,item.taketime)">
								申请开票</view>
							<view class="btn3" v-if="false" @click.stop="toPage('/pages/mine/order/toEvaluated')">去评价
							</view>
							<view class="btn1" v-if="false" @click.stop="delOrder(item.id)">删除订单</view> -->
						</view>
					</view>
				</view>
			</view>

			<u-popup :show="cancelOder.show" mode="center" @close="close" @open="open">
				<view class="popup ">
					<view class="popup-title xfz32 xfw600 xc3 xmt24 xtac">
						取消说明
					</view>
					<view class="popup-tips xp24 xbs">
						<u--textarea v-model="cancelOder.content" placeholder="请输入内容"></u--textarea>
					</view>



					<view class="xflex-x-between xp24 xbs">
						<view class="popup-btn1" @click="cancelOrder()">
							确定
						</view>
						<view class="popup-btn2" @click="cancelOder = false">
							取消
						</view>
					</view>
					<!-- <view class="popup-btn xtac ">
						返回首页
					</view> -->
				</view>
			</u-popup>
		</view>
	</z-paging>
</template>

<script setup>
	import {
		onReachBottom,
		onShow,
		onLoad
	} from '@dcloudio/uni-app';
	import {
		ref,
		reactive
	} from "vue"
	// import { getOrderList, getCancelOrder, getTakeOrder, getDelOrder ,getCommonConfig} from "@/network/home.js"
	import {
		orderlists,
		getCancelOrder,
		// getTakeOrder
	} from "@/network/home.js"

	import {
		topage
	} from "@/utils/common.js"


	let img = 'https://cdn.uviewui.com/uview/swiper/swiper3.png'

	let list1 = [

		{
			name: '待付款',
			type: '0'
		},
		{
			name: '待审核',
			type: '1'
		},
		{
			name: '未通过',
			type: '2'
		},
		{
			name: '待上传',
			type: '3'
		},
		{
			name: '已完成',
			type: '4'
		},
		{
			name: '已取消',
			type: '5'
		}
	]

	let invoiceSwitch = ref(0)
	let day = ref(0)
	// 获取发票开关
	const comonConfig = () => {
		getCommonConfig({
			type: "invoice_switch"
		}).then(res => {
			console.log(res);
			invoiceSwitch.value = res.data
		})
		getCommonConfig({
			type: 'expiration_day'
		}).then((res) => {
			console.log(res);
			day.value = res.data;
		});
	}




	// tab切换
	let current = ref(0)
	const getCurrent = (e) => {
		current.value = e.index
		paging.value.reload();
	}

	// 获取订单数据
	const paging = ref(null)
	const dataList = ref([])
	const queryList = (pageNo, pageSize) => {
		orderlists({
			page_no: pageNo,
			page_size: 10,
			status: list1[current.value].type
		}).then(res => {
			// 计算创建时间到现在有多少天 时 分 秒
			// res.data.lists.map(item => {
			// 	// 获取当前时间
			// 	const now = new Date();
			// 	// 获取创建时间
			// 	const createdTime = new Date(item.autocanceltime * 1000); // 这里设置为创建时间

			// 	const timeDiff = createdTime - now;

			// 	// 计算天数、小时数、分钟数和秒数
			// 	const days = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
			// 	const hours = Math.floor((timeDiff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
			// 	const minutes = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60));
			// 	const seconds = Math.floor((timeDiff % (1000 * 60)) / 1000);

			// 	item.currentTime = {
			// 		days,
			// 		hours,
			// 		minutes,
			// 		seconds
			// 	}



			// 	return item
			// })
			console.log(res.data.lists);
			paging.value.complete(res.data.lists);
		}).catch(res => {
			paging.value.complete(false);
		})
	}

	const toPages = (url, taketime) => {
		// 获取当前时间的时间戳
		const currentTime = new Date().getTime();
		// 加上固定的天数
		const daysToAdd = day.value;
		const days = taketime * 1000
		const newTime = days + daysToAdd * 24 * 60 * 60 * 1000; // 转换为毫秒

		if (newTime > currentTime) {
			console.log("不满足", newTime, currentTime);
			uni.showToast({
				icon: 'none',
				title: "请收货后" + day.value + '天后申请'
			})
		} else {
			uni.navigateTo({
				url: url
			})
		}

		console.log(newTime);

	}


	let cancelOder = reactive({
		id: '',
		show: false,
		content: ''
	})

	const opencancel = (id) => {
		cancelOder.id = id
		cancelOder.show = true
	}
	// 取消订单
	const cancelOrder = (id) => {


		getCancelOrder({
			id: cancelOder.id,
			reason: cancelOder.content
		}).then(ress => {
			cancelOder.show = false
			uni.showToast({
				title: '取消成功',
				icon: 'none'
			})
			paging.value.reload();
		})


	}
	const delOrder = (id) => {
		uni.showModal({
			title: '提示',
			content: '是否删除订单',
			success: (res) => {
				if (res.confirm) {
					getDelOrder({
						id: id
					}).then(ress => {
						uni.showToast({
							title: '删除成功',
							icon: 'none'
						})
						paging.value.reload();
					})
				}
			},
		})
	}
	// 确认收货
	const TakeOrder = (id) => {
		uni.showModal({
			title: '提示',
			content: '是否确认收货',
			success: (res) => {
				if (res.confirm) {
					getTakeOrder({
						id: id
					}).then(res => {
						uni.showToast({
							title: '收货成功',
							icon: 'none'
						})
						paging.value.reload();
					})
				}

			},
		})
	}
	// 立即支付
	const goPay = (order) => {

		uni.navigateTo({
			url: `/pages/cart/play?id=${order.id}&money=${order.order_amount}`
		})
	}




	onLoad((data) => {
		if (data.type) {
			current.value = data.type
		}
		// comonConfig()

	})

	onShow(()=>{
		paging.value.reload()
	})
</script>

<style lang="scss">
	page {
		background: #f9f9f9;
	}

	.time {
		@include flex;
		align-items: center;

		&__custom {
			// margin-top: 4px;
			// width: 22px;
			height: 22px;
			// background-color: $u-primary;
			border-radius: 4px;
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			justify-content: center;
			align-items: center;

			&__item {
				// color: #fff;
				font-size: 12px;
				text-align: center;
			}
		}

		&__doc {
			// color: $u-primary;
			// padding: 0px 4px;
		}

		&__item {
			color: #606266;
			font-size: 15px;
			margin-right: 4px;
		}
	}

	.bgf {
		background-color: #fff;
	}

	.shop {
		background-color: #fff;

		&-img {
			width: 36rpx;
			height: 36rpx;
			margin-right: 17rpx;
		}

		&-name {
			font-size: 32rpx;
			color: #333333;
		}

		&-top {
			border-bottom: 1rpx solid #d8d8d8;
		}

		.time {
			font-size: 24rpx;
			font-weight: 500;
			color: #FB2F41;
		}
	}

	.commodity {
		&-img {
			width: 200rpx;
			height: 200rpx;
			border-radius: 12rpx;
		}

		&-info {
			height: 200rpx;
			align-items: normal;
		}

		&-title {
			font-size: 28rpx;
			font-weight: 500;
			color: #333333;
			line-height: 40rpx;
		}

		&-specs {
			font-size: 24rpx;
			font-weight: 500;
			color: #909090;
			line-height: 28rpx;
		}

		&-pic {
			font-size: 36rpx;
			font-weight: 600;
			color: #755E3A;
			line-height: 50rpx;
		}

		&-num {
			font-size: 24rpx;
			font-weight: 400;
			color: #909090;
			line-height: 33rpx;
		}
	}

	.total {
		text-align: right;
		font-size: 28rpx;
		font-weight: 500;
		color: #333333;

		&>text {
			color: #755E3A;
		}
	}

	.btn1 {
		width: 140rpx;
		height: 54rpx;
		border-radius: 27rpx;
		border: 2rpx solid #909090;
		font-size: 24rpx;
		font-weight: 500;
		color: #666666;
		text-align: center;
		line-height: 54rpx;
	}

	.btn2 {
		width: 140rpx;
		height: 54rpx;
		border-radius: 27rpx;
		background: #CDA26C;
		font-size: 24rpx;
		font-weight: 500;
		color: #ffffff;
		text-align: center;
		line-height: 54rpx;
	}

	.btn3 {
		width: 140rpx;
		height: 54rpx;
		border-radius: 27rpx;
		border: 2rpx solid #CDA26C;
		font-size: 24rpx;
		font-weight: 500;
		color: #CDA26C;
		text-align: center;
		line-height: 54rpx;
	}

	.state1 {
		color: #FA3B3A;

	}

	.state2 {
		color: #CDA26C;

	}

	.state3 {
		color: #CDA26C;

	}

	.state4 {
		color: #909090;

	}


	.popup {
		width: 520rpx;
		// height: 347rpx;
		// padding-bottom: 50rpx;
		background: #FFFFFF;
		border-radius: 20rpx;

		&-tips {
			font-size: 28rpx;
			font-weight: 500;
			color: #755E3A;

		}

		&-title {
			padding-top: 40rpx;
		}



		&-btn1 {
			width: 200rpx;
			height: 72rpx;
			background: #CDA26C;
			border-radius: 36rpx;
			font-size: 28rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 72rpx;
			margin: 40rpx auto 0;
			text-align: center;
		}

		&-btn2 {
			width: 200rpx;
			height: 72rpx;
			border: 1rpx solid #CDA26C;
			border-radius: 36rpx;
			font-size: 28rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #CDA26C;
			line-height: 72rpx;
			margin: 40rpx auto 0;
			text-align: center;
		}
	}
</style>